/**
 * Created by work on 17/3/15.
 */
import React from 'react'
import PropTypes from 'prop-types';
import Picker from './Picker';
import Config from '../../../Config'
class DateTimePanel extends React.Component {
  constructor(props) {
    super(props);
    const year = parseInt(new Date().getFullYear(), 10);
    const minY = (typeof this.props.minYear === 'number') ? this.props.minYear : (year - 100);
    const maxY = (typeof this.props.maxYear === 'number') ? this.props.maxYear : (year + 100);
    this.defValue = this.props.defaultIndex ? this.props.defaultIndex
      : [(parseInt(new Date().getFullYear(), 10) - minY), (parseInt(new Date().getMonth(), 10)),
        (parseInt(new Date().getDate(), 10) - 1)];
    this.yearItems = [];
    this.monthItems = [];
    this.dayItems = [];
    this.hourItems = [];
    this.minuteItems = [];
    for (let y = minY; y <= maxY; y ++) {
      this.yearItems.push(y);
    }
    for (let m = 1; m <= 12; m ++) {
      this.monthItems.push(m);
    }
    const defY = this.yearItems[this.defValue[0]];
    let defM = this.monthItems[this.defValue[1]];
    const totalDays = new Date(defY, defM, 0).getDate();
    for (let d = 1; d <= totalDays; d++) {
      this.dayItems.push(d);
    }
    for (let h = 0; h < 24; h ++) {
      this.hourItems.push(h);
    }
    for (let mi = 0; mi < 60; mi ++) {
      this.minuteItems.push(mi);
    }
    let defD = this.dayItems[this.defValue[2]];
    this.type = 3;
    if (this.props.type === 'year') {
      this.type = 1;
    } else if (this.props.type === 'year&month') {
      this.type = 2;
    }
    if (this.type === 1) {
      defM = 1;
      defD = 1;
    }
    if (this.type === 2) {
      defD = 1;
    }
    this.state = {
      year: defY,
      month: defM,
      day: defD,
      hour:0,
      minute:0,
    };
   
  }

  handleSetDay = (y, m) => {
    this.dayItems = [];
    const totalDays = new Date(y, m, 0).getDate();
    for (let d = 1; d <= totalDays; d++) {
      this.dayItems.push(d);
    }
    this.setState({year: y, month: m});
  };
  addZero = (str) => {
    let string = str;
    if (typeof string !== 'string') {
      string = string.toString();
    }
    string = string.length <= 1 ? `0${string}` : string;
    return string;
  };

  render() {
    let title = (<div style={style.top}>
      <span>{this.state.year}</span>
      <small style={style.small}>年</small>
      <span>{this.state.month}</span>
      <small style={style.small}>月</small>
      <span>{this.state.day}</span>
      <small style={style.small}>日</small>
      <span> {this.addZero(this.state.hour)}</span>
      <small style={style.small}>:</small>
      <span> {this.addZero(this.state.minute)}</span>
    </div>);
    let opt = (
      <div className='box' style={style.box}>
        <Picker
          options={this.yearItems}
          onChange={(value) => this.handleSetDay(value, this.state.month)}
          defaultIndex={this.defValue[0]}
          show={this.props.show}
        />
        <p style={style.title}>-</p>
        <Picker
          options={this.monthItems}
          onChange={(value) => this.handleSetDay(this.state.year, value)}
          defaultIndex={this.defValue[1]}
          show={this.props.show}
        />
        <p style={style.title}>-</p>
        <Picker
          options={this.dayItems}
          onChange={(value) => this.setState({day: value})}
          defaultIndex={this.defValue[2]}
          show={this.props.show}
        />
        {/* <p style={style.title}>日</p> */}
        <Picker
          options={this.hourItems}
          onChange={(value) => this.setState({hour: value})}
          defaultIndex={this.defValue[3]}
          show={this.props.show}
        />
        <p style={style.title}>:</p>
        <Picker
          options={this.minuteItems}
          onChange={(value) => this.setState({minute: value})}
          defaultIndex={this.defValue[4]}
          show={this.props.show}
        />
        {/* <p style={style.title}>分</p> */}
      </div>
    );
    return (
      <div
        style={Object.assign({}, style.shadow, {display: this.props.show ? 'block' : 'none'})}
      >
        <div style={style.panel}>
        <div style={style.action}>
            <div
              style={style.cancel}
              onClick={() => { this.props.onCancel(); }}
            >
              取消
            </div>
            <div
              style={style.confirm}
              onClick={() => {
                let show = `${this.state.year}年${this.addZero(this.state.month)}月${this.addZero(this.state.day)}日  ${this.addZero(this.state.hour)}:${this.addZero(this.state.minute)}`;
               
                const value = {
                  show,
                  pass: `${this.state.year}-${this.addZero(this.state.month)}-${this.addZero(this.state.day)}  ${this.addZero(this.state.hour)}:${this.addZero(this.state.minute)}`
                };
                this.props.onConfirm(value); //eslint-disable-line
              }}
            >
              确定
            </div>
          </div>
          {title}
          <div style={style.mid}>
            {
              opt
            }
          </div>
        
        </div>
      </div>
    );
  }
}

DateTimePanel.propTypes = {
  show: PropTypes.bool.isRequired,
  onCancel: PropTypes.func.isRequired,
  // label: PropTypes.string.isRequired,
  minYear: PropTypes.number,
  maxYear:PropTypes.number,
  defaultIndex: PropTypes.array,
  onConfirm: PropTypes.func.isRequired,
  type: PropTypes.string
};

const  style = {
  shadow: {
      position: 'fixed',
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, .4)',
      zIndex: 999,
  },
  panel: {
      width: '100%',
      // height: '220px',
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: '#fff'
  },
  top: {
      height: '32px',
      lineHeight: '32px',
      textAlign: 'center',
      color:  Config.BaseColor,
      fontSize: '16px',
      fontWeight: 'bold',
      marginBottom:'12px'
  },
  small: {
      fontSize: '14px',
      fontWeight: 'normal',
      marginRight: '2px',
      marginLeft: '1px'
  },
  mid: {
      height: '190px'
  },
  box: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      paddingBottom:'10px',
      overFlow:'hidden'
  },
  title: {
      fontSize: '16px',
      color: Config.BaseColor,
  },
  label: {
      marginTop: '10px',
      height: '20px',
      fontSize: '14px',
      lineHeight: '30px',
      textAlign: 'center',
      color: Config.BaseColor,
  },
  action: {
      width: '100%',
      height: '60px',
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      fontSize: '14px'
  },
  cancel: {
      margin: '0 20px',
      color: '#333'
  },
  confirm: {
      margin: '0 20px',
      color: Config.BaseColor,
  }
}
export default DateTimePanel;